<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" v-show="showSearch" :inline="true">
      <el-form-item label="猪场类型"  prop="pigType">
        <el-select v-model="queryParams.pigType" clearable>
          <el-option label="繁殖场" value="1"></el-option>
          <el-option label="育肥场" value="2"></el-option>
          <el-option label="租赁代养场" value="3"></el-option>
          <el-option label="种猪场" value="4"></el-option>
          <el-option label="自养小区" value="5"></el-option>
          <el-option label="租赁繁殖场" value="6"></el-option>
          <el-option label="公猪站" value="7"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="片区" prop="deptId">
        <treeselect v-model="queryParams.deptId" style="width:200px;line-height:34px" size="medium" :options="zoneList" :show-count="true" placeholder="请选择片区" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        <el-button icon="el-icon-download" type="primary" size="mini" @click="exportData">导出</el-button>
      </el-form-item>
    </el-form>

    <el-table v-loading="loading" :data="list"  border size="mini"
              :height="listHeight || fillHeight('listHeight',['queryForm','add','pagination'],['hamburger-container','tags-view-container'], 130)">
      <el-table-column type="index" label="序号" width="50" align="center"></el-table-column>
      <el-table-column label="片区" prop="deptName" :show-overflow-tooltip="true" align="center"/>
      <el-table-column label="立项名称" prop="projectName" :min-width="140" :show-overflow-tooltip="true" align="center"/>
      <el-table-column label="猪场类型" prop="pigType" align="center">
        <template slot-scope="scope">
          <span v-show="scope.row.pigType == '1'">繁殖场</span>
          <span v-show="scope.row.pigType == '2'">育肥场</span>
          <span v-show="scope.row.pigType == '3'">租赁代养场</span>
          <span v-show="scope.row.pigType == '4'">种猪场</span>
          <span v-show="scope.row.pigType == '5'">自养小区</span>
          <span v-show="scope.row.pigType == '6'">租赁繁殖场</span>
          <span v-show="scope.row.pigType == '7'">公猪站</span>
        </template>
      </el-table-column>
      <el-table-column label="立项" prop="立项" align="center">
        <el-table-column label="提报时间" prop="startTime" align="center"  :min-width="140">
        </el-table-column>
        <el-table-column label="完成时间" prop="completeTime" align="center" :min-width="140">
        </el-table-column>
        <el-table-column label="工期天数" prop="day" align="center" :min-width="140">
        </el-table-column>
      </el-table-column>
      <el-table-column label="设计" prop="设计" align="center">
        <el-table-column label="开始时间" prop="completeTime" align="center" :min-width="140">
        </el-table-column>
        <el-table-column label="完成时间" prop="designCompleteTime" align="center" :min-width="140">
        </el-table-column>
        <el-table-column label="工期天数" prop="designDay" align="center" :min-width="140">
        </el-table-column>
      </el-table-column>
      <el-table-column label="预算" prop="预算" align="center">
        <el-table-column label="开始时间" prop="designCompleteTime" align="center" :min-width="140">
        </el-table-column>
        <el-table-column label="完成时间" prop="budgetCompleteTime" align="center" :min-width="140">
        </el-table-column>
        <el-table-column label="工期天数" prop="budgetDay" align="center" :min-width="140">
        </el-table-column>
      </el-table-column>
      <el-table-column label="承建商匹配" prop="承建商匹配" align="center">
        <el-table-column label="开始时间" prop="budgetCompleteTime" align="center" :min-width="140">
        </el-table-column>
        <el-table-column label="完成时间" prop="matchCompleteTime" align="center" :min-width="140">
        </el-table-column>
        <el-table-column label="工期天数" prop="matchDay" align="center" :min-width="140">
        </el-table-column>
      </el-table-column>
      <el-table-column label="合约" prop="合约" align="center">
        <el-table-column label="开始时间" prop="matchCompleteTime" align="center" :min-width="140">
        </el-table-column>
        <el-table-column label="完成时间" prop="contractCompleteTime" align="center" :min-width="140">
        </el-table-column>
        <el-table-column label="工期天数" prop="contractDay" align="center" :min-width="140">
        </el-table-column>
      </el-table-column>
      <el-table-column label="竣工验收" prop="竣工验收" align="center">
        <el-table-column label="开始时间" prop="contractCompleteTime" align="center" :min-width="140">
        </el-table-column>
        <el-table-column label="完成时间" prop="completeCompleteTime" align="center" :min-width="140">
        </el-table-column>
        <el-table-column label="工期天数" prop="completeDay" align="center" :min-width="140">
        </el-table-column>
      </el-table-column>
      <el-table-column label="结算" prop="结算" align="center">
        <el-table-column label="开始时间" prop="completeCompleteTime" align="center" :min-width="140" >
        </el-table-column>
        <el-table-column label="完成时间" prop="balanceCompleteTime" align="center" :min-width="140">
        </el-table-column>
        <el-table-column label="工期天数" prop="balanceDay" align="center" :min-width="140">
        </el-table-column>
      </el-table-column>
      <el-table-column label="竣工款支付" prop="竣工款支付" align="center">
        <el-table-column label="开始时间" prop="balanceCompleteTime" align="center" :min-width="140">
        </el-table-column>
        <el-table-column label="完成时间" prop="completePayCompleteTime" align="center" :min-width="140">
        </el-table-column>
        <el-table-column label="工期天数" prop="completePayDay" align="center" :min-width="140">
        </el-table-column>
      </el-table-column>
      <el-table-column label="结算款支付" prop="结算款支付" align="center">
        <el-table-column label="开始时间" prop="completePayCompleteTime" align="center" :min-width="140">
        </el-table-column>
        <el-table-column label="完成时间" prop="balancePayCompleteTime" align="center" :min-width="140">
        </el-table-column>
        <el-table-column label="工期天数" prop="balancePayDay" align="center" :min-width="140">
        </el-table-column>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
  import { listForm ,exportDatas} from "./detailsTracking";
  import BaseIndex from '@/views/base/BaseIndex'
  import Treeselect from "@riophae/vue-treeselect";
  import "@riophae/vue-treeselect/dist/vue-treeselect.css";
  import {getTreeselect} from "@/api/progressManagement/constructionPlan";
  export default {
    name: "ReportManagementDetailsTracking",
    extends: BaseIndex,
    components: { Treeselect },
    data() {
      return {
        listHeight:0,
        zoneList:[],
        list:[],
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          pigType: undefined,
          deptId: undefined,
        },
        props:{
          value:'id',
          label:'label'
        }
      };
    },
    watch: {

    },
    created() {
      this.getList();
      getTreeselect().then(
        response => {
          if(response && response.code ===0){
            this.zoneList = response.data
          }else{
            this.msgError(response.msg)
          }
          this.loading = false;
        }
      );
    },
    methods: {
      listForm, // 导出文件
      exportData(){
        exportDatas(this.queryParams).then(res=>{
          let link = document.createElement('a');
          link.href = URL.createObjectURL(res);
          link.setAttribute('download','项目明细跟踪表.xls');
          link.click();
          link = null;
        }).catch(err=>{
        });
      },
      getList() {
        this.loading = true;
        delete this.queryParams.pageSize
        delete this.queryParams.pageNum
        return listForm(this.queryParams).then(
          response => {
            if(response && response.code ===0){
              if (response.data)this.list = response.data
            }else{
              this.msgError(response.msg)
            }
            this.loading = false;
          }
        ).catch(err=>{
          this.loading = false;
        });
      },
    }
  };
</script>
